<template>
  <div class="dashboard-container">
    <div class="dashboard-text">欢迎使用 Vue3 Admin 系统</div>
    <div class="dashboard-info">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>系统信息</span>
              </div>
            </template>
            <div class="item">
              <span>Vue 版本</span>
              <span>3.x</span>
            </div>
            <div class="item">
              <span>Element Plus</span>
              <span>最新版</span>
            </div>
            <div class="item">
              <span>构建工具</span>
              <span>Vite</span>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>用户信息</span>
              </div>
            </template>
            <div class="item">
              <span>用户名</span>
              <span>{{ username }}</span>
            </div>
            <div class="item">
              <span>角色</span>
              <span>{{ roles.join(', ') }}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
const username = computed(() => userStore.name)
const roles = computed(() => userStore.roles)
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    padding: 20px;
  }
  &-text {
    font-size: 24px;
    line-height: 46px;
    color: #42b983;
    margin-bottom: 20px;
  }
  &-info {
    margin-top: 20px;
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  
  &:last-child {
    margin-bottom: 0;
  }
}
</style> 